<template>
  <div class="login">
    <s-header :name="type === 'login' ? '登录' : '注册'" :back="'/home'"></s-header>
    <img class="logo" src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="">
    <div v-if="type === 'login'" class="login-body login">
      <van-form @submit="onSubmit">
        <van-field
            v-model="login.username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="login.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            center
            clearable
            label="验证码"
            placeholder="输入验证码"
            v-model="login.captcha"
        >
          <template #button>
            <img :src="'data:img/png;base64,'+captchaImg" alt="" @click="getCaptcha"/>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <div class="link-register" @click="toggle('register')">立即注册</div>
          <van-button round block color="#1baeae" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div v-else class="login-body register">
      <van-form @submit="onSubmit">
        <van-field
            v-model="register.username"
            name="username1"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="register.password"
            type="password"
            name="password1"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="register.nickname"
            name="nickname1"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
            name="headImg1"
            label="头像上传"
            placeholder="头像上传"
            :rules="[{ required: true, message: '请上传头像' }]"
        >
          <template #input>
            <van-uploader v-model="uploadFileList" :after-read="uploadFile"/>
          </template>
        </van-field>


        <van-field
            center
            clearable
            label="验证码"
            placeholder="输入验证码"
            v-model="register.captcha"
        >
          <template #button>
            <img :src="'data:img/png;base64,'+captchaImg" alt="" @click="getCaptcha"/>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <div class="link-login" @click="toggle('login')">已有登录账号</div>
          <van-button round block color="#1baeae" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
import sHeader from '@/components/SimpleHeader'
import {captcha, login, register} from '@/service/auth'
import {removeLocal, setLocal} from '@/common/js/local-storge'
import {Toast} from 'vant'
import {uploadHeadImg} from "@/service/file";

export default {
  setup() {
    const state = reactive({
      login: {
        username: '',
        password: '',
        captcha: '',
      },
      register: {
        username: '',
        password: '',
        nickname: '',
        headImg: '',
        captcha: '',
      },
      type: 'login',
      captchaImg: '',
      uuid: '',
      uploadFileList: []
    })

    onMounted(async () => {
      await getCaptcha()
    })

    // 切换登录和注册两种模式
    const toggle = (v) => {
      state.type = v
    }

    const getCaptcha = async () => {
      const {img, uuid} = await captcha()
      state.captchaImg = img
      state.uuid = uuid
      Toast.success("刷新验证码成功")
    }

    // 提交登录或注册表单
    const onSubmit = async (values) => {

      if (state.type === 'login') {
        const {token, userId} = await login({
          "username": values.username,
          "password": values.password,
          "captcha": values.captcha,
          "uuid": state.uuid
        })
        setLocal('token', token)
        setLocal('userId', userId)
        // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
        window.location.href = '/'
      } else {
        const {token} = await register({
          "username": values.username1,
          "password": values.password1,
          "nickName": values.nickname1,
          "headImg": state.register.headImg,
          "captcha": values.captcha,
          "uuid": state.uuid
        })
        removeLocal('token', token)
        Toast.success('注册成功')
        state.type = 'login'
        // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
        window.location.href = '/'
      }
    }

    const uploadFile = async (file) => {
      // console.log(file)
      console.log(file.file)

      const {msg} = await uploadHeadImg({
        "multipartFile": file.file
      })
      state.register.headImg = msg
      Toast.success("文件上传成功")
    }

    return {
      ...toRefs(state),
      toggle,
      onSubmit,
      getCaptcha,
      uploadFile
    }
  },
  components: {
    sHeader,
  }
}
</script>

<style lang="less">
.login {
  .logo {
    width: 120px;
    height: 120px;
    display: block;
    margin: 80px auto 20px;
  }

  .login-body {
    padding: 0 20px;
  }

  .login {
    .link-register {
      font-size: 14px;
      margin-bottom: 20px;
      color: #1989fa;
      display: inline-block;
    }
  }

  .register {
    .link-login {
      font-size: 14px;
      margin-bottom: 20px;
      color: #1989fa;
      display: inline-block;
    }
  }

  .verify-bar-area {
    margin-top: 24px;

    .verify-left-bar {
      border-color: #1baeae;
    }

    .verify-move-block {
      background-color: #1baeae;
      color: #fff;
    }
  }

  .verify {
    > div {
      width: 100%;
    }

    display: flex;
    justify-content: center;

    .cerify-code-panel {
      margin-top: 16px;
    }

    .verify-code {
      width: 40% !important;
      float: left !important;
    }

    .verify-code-area {
      float: left !important;
      width: 54% !important;
      margin-left: 14px !important;

      .varify-input-code {
        width: 90px;
        height: 38px !important;
        border: 1px solid #e9e9e9;
        padding-left: 10px;
        font-size: 16px;
      }

      .verify-change-area {
        line-height: 44px;
      }
    }
  }
}
</style>
